<!--
 * @Description: 常用单品卡片，详情见UI：《首页-线上选品、找相似、猜你喜欢》...
 * @Author: acexu 578599619@qq.com
 * @Date: 2024-11-02 10:42:34
 * @LastEditors: acexu 578599619@qq.com
 * @LastEditTime: 2024-11-02 10:42:34
 * @FilePath: /xp-platform-mobile/sheep/components/f-common-singleGoods-card/f-common-singleGoods-card.vue
 * @demoPic: 
-->
<template>
	<view class="content">
		<image class="goodsPic" :src="imgSrc2"></image>
		<view class="bottom">
			<image class="collection" :src="imgSrc_collection" @click="collectionClick" />
			<image class="cart" :src="imgSrc_cart" @click="cartClick" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				collection: [
					'./../../../static/common/unCollect.png',
					'./../../../static/common/collected.png',
				],
				cart: [
					'./../../../static/common/cartOuter.png',
					'./../../../static/common/cartInner.png',
				],
			};
		},
		porps: {
			imgSrc: {
				type: String,
				default: () => './../../../static/common/goodsPic.png',
			},
			inCart: {
				type: Boolean,
				default: true,
			},
			inCollection: {
				type: Boolean,
				default: false,
			},
		},
		computed: {
			imgSrc_collection() {
				return this.inCollection ? this.collection[1] : this.collection[0];
			},
			imgSrc_cart() {
				return this.inCart ? this.cart[1] : this.cart[0];
			},
			imgSrc2() {
				return './../../../static/common/goodsPic.png';
			},
		},
		methods: {
			collectionClick() {
				// TODO 加入收藏和移出收藏切换
			},
			cartClick() {
				// TODO 加入购物车和移出购物车切换
			},
		},
	};
</script>

<style lang="scss" scoped>
	.content {
		width: 336rpx;
		height: 388rpx;
		background-color: #fff;
		padding: 12rpx;
		margin-top: 16rpx;
		.goodsPic {
			width: 312rpx;
			height: 312rpx;
		}

		.bottom {
			display: flex;
			justify-content: space-between;

			.collection {
				width: 36rpx;
				height: 34rpx;
			}

			.cart {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
</style>
